:root {
  --syntax_normal: #1b1e23;
  --syntax_comment: #a9b0bc;
  --syntax_number: #20a5ba;
  --syntax_keyword: #c30771;
  -syntax_atom: #10a778;
  --syntax_string: #008ec4;
  --syntax_error: #ffbedc;
  --syntax_unknown_variable: #838383;
  --syntax_known_variable: #005f87;
  --syntax_matchbracket: #20bbfc;
  --syntax_key: #6636b4;
  /* --mono_fonts: 82%/1.5 Menlo, Consolas, monospace; */
}
.observablehq--collapsed,
.observablehq--expanded,
.observablehq--function,
.observablehq--gray,
.observablehq--import,
.observablehq--string:after,
.observablehq--string:before {
  color: var(--syntax_normal);
}
.observablehq--collapsed,
.observablehq--inspect {
  cursor: pointer;
  display: none;
}
.observablehq .observablehq--inspect {
  display: none;
}
.observablehq--field {
  text-indent: -1em;
  margin-left: 1em;
}
.observablehq--empty {
  color: var(--syntax_comment);
}
.observablehq--blue,
.observablehq--keyword {
  color: #3182bd;
}
.observablehq--forbidden,
.observablehq--pink {
  color: #e377c2;
}
.observablehq--orange {
  color: #e6550d;
}
.observablehq--boolean,
.observablehq--null,
.observablehq--undefined {
  color: var(--syntax_atom);
}
.observablehq--bigint,
.observablehq--date,
.observablehq--green,
.observablehq--number,
.observablehq--regexp,
.observablehq--symbol {
  color: var(--syntax_number);
}
.observablehq--index,
.observablehq--key {
  color: var(--syntax_key);
}
.observablehq--prototype-key {
  color: #aaa;
}
.observablehq--empty {
  font-style: oblique;
}
.observablehq--purple,
.observablehq--string {
  color: var(--syntax_string);
}
.observablehq--error,
.observablehq--red {
  color: #e7040f;
}
.observablehq--inspect {
  font: var(--mono_fonts);
  /* overflow-x: auto; */
  display: block;
  white-space: pre;
}
.observablehq--error .observablehq--inspect {
  word-break: break-all;
  white-space: pre-wrap;
}

.button {
  font-size: 15px;
  cursor: pointer;
  padding: 4px 4px;
  text-align: center;
  border-radius: 5px;
  transform: translate(450px,545px);
}
.button:hover {
  background-color: #f7e6e8;
}
#legend-container {
  display: inline-block;
  transform: translate(440px, 520px);
  background-color: #f0f0f0;
  padding: 20px 30px 20px 25px;
  border-radius: 8%;
}
.legend-block {
  opacity: 0.7;
}
.bar_axis {
  stroke: white !important;
}
#index-rank {
  transform: translateY(-150px); 
}
#legend-container span {
  font-size: 12px;
  transform: translateX(8px);
}
